<template>
<div>
<!--  <head-top signin-up="msite">
    <router-link :to="'/search/' + geohash" class="link_search" slot="search">
      <yd-icon name="search" size=".9rem" color="#fff"></yd-icon>
    </router-link>
    <router-link to="/home" slot="msite-title" class="msite_title">
      <span class="title_text ellipsis">{{msietTitle}}</span>
    </router-link>
  </head-top>
  <nav class="msite_nav">
    <div ref="swipercontainer" class="swiper-container" v-if="foodTypes.length">
      <div class="swiper-wrapper">
        <div class="swiper-slide food_types_container" v-for="(item, index) in foodTypes" :key="index">
          <router-link :to="{path: '/food', query: {geohash, title: foodItem.title, restaurant_category_id: getCategoryId(foodItem)}}" v-for="foodItem in item" :key="foodItem.id" class="link_to_food">
            <figure>
              <img :src="imgBaseUrl + foodItem.image_url">
              <figcaption>{{foodItem.title}}</figcaption>
            </figure>
          </router-link>
        </div>
      </div>
      <div ref="swiperpagination" id="swiperpagination" class="swiper-pagination swiper-pagination-center"></div>
    </div>
  </nav>
  <div class="shop_list_container">
    <header class="shop_header">
      <yd-icon name="location" size=".9rem"></yd-icon><span class="shop_header_title">附近商家</span>
    </header>
      <div class="list-wrapper">
        <shop-list v-if="hasGetData" :geohash="geohash"></shop-list>
      </div>
  </div>
  <div class="foot">
    <foot-guide></foot-guide>
  </div>-->
</div>
</template>

<!--<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  import headTop from 'src/components/header/head'
  import footGuide from 'src/components/footer/footGuide'
  import shopList from 'src/components/common/shoplist/shoplist'
  import {msiteAdress, msiteFoodTypes, cityGuess} from 'src/service/getData'
  import scroll from 'components/common/scroll/scroll'
  /*import Swiper from 'src/config/swiper.min'*/
  import Swiper from 'swiper';

 // 轮播插件的使用参照官网最新使用http://idangero.us/swiper/demos/！而且版本是4.x了！
  export default {
  data(){
  return{
    geohash:'',
    msietTitle:'',
    foodTypes: [], // 食品分类列表
    hasGetData: false, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
    imgBaseUrl: 'https://fuss10.elemecdn.com', //图片c域名地址,
    headTitle: '', // msiet页面头部标题
    foodTypes1:'',
    foodTypes2:'',
    scrollY:0
  }
   },
   created(){
     this.probeType = 3
     this.listenScroll = true
   },
   beforeMount(){
     if(!this.$route.query.geohash){
       cityGuess().then((res)=>{
         this.geohash = res.latitude + ','+ res.longitude;
       })
     }else{
       this.geohash = this.$route.query.geohash;
     }
     this.SAVE_GEOHASH(this.geohash);
     msiteAdress(this.geohash).then((res)=>{
       this.msietTitle = res.name;
       // 记录当前经度纬度
       this.RECORD_ADDRESS(res);
       this.hasGetData = true;
     })
    },
   mounted(){
     //根据hash获取食品类型列表
     /*msiteFoodTypes(this.geohash).then((res)=>{
       let resLength = res.length;
       let resArr = res.slice(); // 返回一个新的数组,数组长度为16
       let foodArr = [];
       //把1个数组拆开成两组数组，（两个滚动屏遍历之）
       for (let i = 0, j = 0; i < resLength; i += 8, j++) {
         //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
         foodArr[j] = resArr.splice(0, 8);
       }
       this.foodTypes = foodArr;
       // 发现bug，如果单纯this.foodTypes1=foodArr[0]赋值，会报错（遍历的item只出现键值，没有键！），所以改变形式赋值！
       let retfirst=[];
       let retsecond=[];
       // 单独拆开不同的object
       foodArr.forEach((item,index)=>{
         if(index < 1){
           retfirst.push(item);
         }else{
           retsecond.push(item)
         }
       })
       this.foodTypes1 = retfirst;
       // 这是一个包含8个json对象的数组
       //console.log(typeof this.foodTypes1)
       // 这是8个json对象
       //console.log(typeof foodArr[0])
       this.foodTypes2 = retsecond;
     })*/
     msiteFoodTypes(this.geohash).then(res => {
       let resLength = res.length;
       let resArr = res.slice(); // 返回一个新的数组
       let foodArr = [];
       for (let i = 0, j = 0; i < resLength; i += 8, j++) {
         foodArr[j] = resArr.splice(0, 8);
       }
       this.foodTypes = foodArr;
     }).then(() => {
       //初始化swiper
       new Swiper(this.$refs.swipercontainer, {
         pagination: {
           el: this.$refs.swiperpagination
         },
         loop: true
       });
     })
   },

   computed: {
   },
   methods: {
     ...mapMutations([
       'RECORD_ADDRESS', 'SAVE_GEOHASH'
     ]),
     // 解码url地址，求去restaurant_category_id值
     getCategoryId(item){
       //url="eleme://restaurants?filter_key=%7B%22category_schema%22%3A%7B%22category_name%22%3A%22%5Cu751c%5Cu54c1%5Cu996e%5Cu54c1%22%2C%22complex_category_ids%22%3A%5B240%2C241%2C242%5D%2C%22is_show_all_category%22%3Atrue%7D%2C%22restaurant_category_id%22%3A%7B%22id%22%3A239%2C%22name%22%3A%22%5Cu751c%5Cu54c1%5Cu996e%5Cu54c1%22%2C%22sub_categories%22%3A%5B%5D%2C%22image_url%22%3A%22%22%7D%2C%22activities%22%3A%5B%5D%7D&target_name=%E7%94%9C%E5%93%81%E9%A5%AE%E5%93%81&animation_type=1&is_need_mark=0&banner_type="
       let url = item.link;
      let urlData = decodeURIComponent(url.split('=')[1].replace('&target_name',''));
     // urlData={"category_schema":{"category_name":"\u751c\u54c1\u996e\u54c1","complex_category_ids":[240,241,242],"is_show_all_category":true},"restaurant_category_id":{"id":239,"name":"\u751c\u54c1\u996e\u54c1","sub_categories":[],"image_url":""},"activities":[]}
       if (/restaurant_category_id/gi.test(urlData)) {
         return JSON.parse(urlData).restaurant_category_id.id
       }else{
         return ''
       }
     },
     getData(data){
       console.log('this data='+data)
       this.listdata = data;
     }
   },
   components:{
     scroll,
     shopList,
     footGuide,
     headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../style/css/swiper.css';
  @import '../../style/mixin';
  .link_search{
    left: .8rem;
    @include ct;
  }
  .msite_title{
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;
    margin-left: -0.5rem;
    .title_text{
      @include sc(0.8rem, #fff);
      text-align: center;
      display: block;
    }
  }
  .msite_nav{
    padding-top: 2.1rem;
    background-color: $fc;
    border-bottom: 0.025rem solid $bc;
    height: auto;
    .swiper-container{
      @include wh(100%, auto);
      padding-bottom: 0.6rem;
      .swiper-pagination{
        bottom: 0.2rem;
      }
    }
    .fl_back{
      @include wh(100%, 100%);
    }
  }
  .food_types_container{
    display:flex;
    flex-wrap: wrap;
    padding:0 0 0.8rem 0;
    .link_to_food{
      width: 25%;
      padding: 0.3rem 0rem;
      @include fj(center);
      figure{
        img{
          margin-bottom: 0.3rem;
          @include wh(1.8rem, 1.8rem);
        }
        figcaption{
          text-align: center;
          @include sc(0.55rem, #666);
        }
      }
    }
  }
  .shop_list_container{
    margin-top: .4rem;
    border-top: 0.025rem solid $bc;
    background-color: #fff;
    .shop_header{
      margin-left: 0.5rem;
      color: #999;
      .shop_header_title{
        margin-left: 0.25rem;
        color: #999;
        @include font(0.55rem, 1.6rem);
      }
    }
  }
  .swiper-pagination-center{
    width: 100%;
    text-align: center;
    .swiper-pagination-bullet{
      margin: 0 4px;
    }
  }
 .list-wrapper{
   height:16rem;
   overflow: hidden;
  }
</style>-->
